<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>添加银行卡</title>
    <link href="css/mui.css" rel="stylesheet"/>
    <link href="css/user.css" rel="stylesheet"/>
</head>
<body>
<div id="app" v-cloak>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h2 class="mui-title">添加银行卡</h2>
    </header>

    <div id="pullrefresh" class="mui-content" style="background: #f2f2f2;">
        <div class="userInfo">
            <div class="userIndexList">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <input v-model="cardNo" class="uil_input" type="text" name="" placeholder="输入您的银行卡号"
                                onblur="this.placeholder='输入您的银行卡号'" onfocus="this.placeholder=''">
                    </li>
                    <li class="mui-table-view-cell">
                        <input v-model="cardBank" class="uil_input" type="text" name="" placeholder="请输入开户支行"
                                onblur="this.placeholder='请输入开户支行'" onfocus="this.placeholder=''">
                    </li>
                    <!-- <li class="mui-table-view-cell">
                        <input class="uil_input" type="text" name="" value="*某某">
                    </li> -->
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" id="selectBank">
                            <span class="co_gray">选择银行类型</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="userInfoSubmit" @click='addCard'>
                <a href="#" class="btn-red btn-bloak">立即添加</a>
            </div>
            <div class="userTS">
                <p>1、请尽量填写您长期使用的银行借记卡；</p>
                <p>2、绑定卡是您提款的唯一专用卡；</p>
                <p>3、银行卡开户姓名必须与您实名认证时的姓名一致，否则会导致提款无法到账。</p>
            </div>
        </div>
    </div>
    <div class="showUp">
        <div class="showUpTit">
            <span>选择银行</span>
            <a href="javascript:void(0);"><i class="mui-icon mui-icon-close"></i></a>
        </div>
        <div class="bankNameList">
            <ul>
                <li v-for="item of bank">{{item.bankName}}</li>
            </ul>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
		if(!sessionStorage.getItem("Authorization")){
			mui.alert('', '请先登录', function () {
				window.location.href = 'login.html'
			})
		}
        new Vue({
            el: '#app',
            data: {
                bank: [],
                cardNo: '',
                cardBank: ''
            },
            mounted: function () {
                this.getBank()
            },
            methods: {
                /**
                 *  获取支持银行卡列表
                 */
                getBank: function () {
                    let url = 'biz/api/supportCardPages',
                        that = this,

                    getBankSuc = (data) => {
                        // console.log(data)

                        that.bank = data.data.content
                    },

                    getBankErr = (err) => {
                        console.log(err)
                    }

                    common.ajax(url, null, getBankSuc, getBankErr, 'GET')
                },

                /**
                 *  添加银行卡
                 */
                addCard: function () {
                    let id = window.location.search.replace('?id=', ""),
                        cardNo = this.cardNo,
                        cardBank = this.cardBank,
                        url = 'biz/api/bindbankcardNo',
                        that = this,

                    addCardSuc = (data) => {
                        if(data.code==1000){
                            mui.alert('', data.msg, function () {
                                window.history.back();
                            })
                        } else {
                            mui.alert('', data.msg, function () { })
                        }
                    },

                    addCardErr = (err) => {
                        console.log(err)
                    }

                    common.ajax(url, {card: cardNo, branchName: cardBank, uaaId: id}, addCardSuc, addCardErr)
                }
            }
        })
        $('.nav-list a').eq(4).addClass('mui-active')
        // mui('body').on('tap', 'a', function () { document.location.href = this.href })

        mui(".userInfo").on('tap', '#selectBank', function () {
            $(".showUp").addClass("active")
        })
        mui(".showUp").on('tap', '.showUpTit a', function () {
            $(".showUp").removeClass("active")
        })
        mui(".showUp").on('tap', '.bankNameList li', function () {
            $(".showUp").removeClass("active")
            var txt = $(this).text()
            $("#selectBank span").text(txt)
        })

    })
</script>
</html>
